<script>
import request from '@/utils/request.js'
export default {
  name: 'zTree',
  data: function() {
    return {
      isImportPerson: false, // 默认不会自动导入部门用户信息
      treeData: [],
      setting: {
        data: {
          simpleData: {
            enable: true,
            pIdKey: 'pid'
          }
        },
        check: {
          enable: true
        },
        callback: {
          onCheck: this.onCheck
        }
      },
      zNodes: [],
      projectId: '',
      allCheckedIds: [],
      halfCheckIds: [],
      treeUrl: `/v1/datac/app/datacDeptment/importList`,
      start: 0,
      pageSize: 0,
      flag: false,
      limit: 200000
    }
  },
  watch: {
    projectId(val) {
      this.projectId = val
    }
  },
  methods: {
    // 返回数据
    getPage() {
      const page = {
        limit: this.limit,
        start: this.start
      }
      return page
    },
    // 点击获取选择的数据
    onCheck(event, treeId, treeNode) {
      var zTree = $.fn.zTree.getZTreeObj('treeDemo')
      var nodes = zTree.getCheckedNodes()
      let allChecked = [],
        halfChecked = []
      nodes &&
        nodes.length > 0 &&
        nodes.map(item => {
          if (!item.getCheckStatus().half) {
            item && item.id && allChecked.push(item.id)
          } else {
            item && item.id && halfChecked.push(item.id)
          }
        })
      this.allCheckedIds = [...new Set(allChecked)]
      this.halfCheckIds = [...new Set(halfChecked)]
    },
    getIsImportPerson() {
      return this.isImportPerson || false
    },
    getAllCheckedList() {
      var zTree = $.fn.zTree.getZTreeObj('treeDemo')
      var nodes = zTree.getCheckedNodes()
      let allChecked = [],
        halfChecked = []
      nodes &&
        nodes.length > 0 &&
        nodes.map(item => {
          if (!item.getCheckStatus().half) {
            item && item.id && allChecked.push(item.id)
          } else {
            item && item.id && halfChecked.push(item.id)
          }
        })
      this.allCheckedIds = [...new Set(allChecked)]
      this.halfCheckIds = [...new Set(halfChecked)]
      return this.allCheckedIds.concat(this.halfCheckIds)
    },
    // 加载loading
    initPage() {
      const objLoading = document.getElementById('Loading')
      objLoading.style.display = 'block'
    },
    handleAdd() {
      if (this.start < this.pageSize && this.pageSize !== 0) {
        this.start++
        this.flag = true
        this.initPage()
        this.getTreeData()
      } else {
        this.$message({
          type: 'warning',
          message: '已经是最后一页！'
        })
      }
    },
    // 清空数据
    refresh() {
      this.start = 0
      this.treeData = []
      this.zNodes = []
      this.flag = false
    },
    getTreeData() {
      request({
        url: this.treeUrl,
        method: 'get',
        params: {
          projectId: this.projectId,
          limit: this.limit,
          start: this.start
        }
      })
        .then(({ data }) => {
          const { dataList, page } = data
          const { totalCount } = page
          var objLoading = document.getElementById('Loading')
          objLoading.style.display = 'none'
          this.pageSize = parseInt(totalCount / this.limit)
          let dataArr = dataList
          dataArr = dataArr.map(item => {
            item.checked = item.checked === undefined ? null : item.checked
            item.pid = item.pid === undefined ? null : item.pid
            return item
          })

          if (this.flag) {
            this.treeData = this.zNodes
            this.zNodes = this.treeData.concat(dataArr)
          } else {
            this.zNodes = dataArr
            this.zNodes.unshift({
              name: '全部',
              checked: false,
              pid: null,
              id: null,
              open: true
            })
          }
          $.fn.zTree.init($('#treeDemo'), this.setting, this.zNodes)
        })
        .catch(err => { console.log(err) })
    }
  },
  render() {
    return <div class="zTreeDemoBackground zTreeLeft">
      <c-checkbox v-model={this.isImportPerson}>自动导入部门的用户信息</c-checkbox>
      <div class="el-loading-mask" style="" id="Loading">
        <div class="el-loading-spinner">
          <svg viewBox="25 25 50 50" class="circular">
            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
          </svg>
        </div>
      </div>
      <ul id="treeDemo" class="ztree"></ul>
    </div>
  }
}
</script>
<style>
.ztree li span.button {
  background-image: url('~@/assets/imgs/check.png');
}

.ztree li span.button {
  width: 0px;
}
.ztree li span.button.chk {
  width: 14px;
  height: 14px;
  margin: 0 3px 0 0;
  cursor: pointer;
}
.ztree li span.button.chk.checkbox_false_full {
  background-position: -8px -10px;
}
.ztree li span.button.chk.checkbox_false_full_focus {
  background-position: -68px -10px;
}

.ztree li span.button.chk.checkbox_false_part {
  background-position: -28px -10px;
}
.ztree li span.button.chk.checkbox_false_part_focus {
  background-position: -28px -10px;
}

.ztree li span.button.chk.checkbox_true_full {
  background-position: -48px 3px;
}
.ztree li span.button.chk.checkbox_true_full_focus {
  background-position: -48px 3px;
}

.ztree li span.button.chk.checkbox_true_part {
  background-position: -28px -10px;
}
.ztree li span.button.chk.checkbox_true_part_focus {
  background-position: -28px -10px;
}

.ztree li span.button.ico_open {
  margin-right: 2px;
  background-position: -85px -10px;
  vertical-align: top;
  *vertical-align: middle;
}
.ztree li span.button.ico_close {
  margin-right: 2px;
  background-position: -99px 0px;
  vertical-align: top;
  *vertical-align: middle;
}
.ztree li span.button.roots_close {
  background-position: -99px 0px;
}
.ztree li span.button.roots_open {
  background-position: -85px -10px;
}

.ztree li span.button.center_close {
  background-position: -99px 0px;
}

.ztree li span.button.center_open {
  background-position: -85px -1px;
}

.ztree li span.button.center_docu {
  background-position: -120px -120px;
}

.ztree li span.button.bottom_close {
  background-position: -99px 0px;
}

.ztree li span.button.bottom_open {
  background-position: -85px -1px;
}

.ztree li span.button.root_open {
  background-position: -85px -1px;
}

.ztree li span.button.root_close {
  background-position: -99px 0px;
}
.ztree li ul.line {
  background: none;
}

.ztree li a {
  text-decoration: none;
  color: #606266;
}
.ztree li a:hover {
  text-decoration: none;
}

.el-loading-mask {
  position: absolute;
  top: 55px;
}
</style>
